<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>jqAjax请求</title>
</head>
<body>
<span>用户名：</span><input type="text" class="username" name=""><br/>
<span>密码：</span><input type="text" class="password" name=""><br/>
<button>get无参请求</button>
<button>get带参请求</button>
<button>post请求</button>
<script src="jquery-1.9.1.min.js"></script>
<script>
	var $userNameInput = $('.username');
	var $passwordInput = $('.password');
	var $btns = $('button');

	//无参get
	$btns.eq(0).click(function(){
		$.ajax({
			//说明请求方式为get请求
			type:'get',
			//指明请求要发送到的php后台地址
			url:'jqAjax.php',
			//指明与后台交互的数据格式为json
			dataType:'json',
			//当后台返回具体数据时，本函数自动执行，用来获取后台返回的具体内容
			success:function(res){
				console.log(res);
				console.log(res.info);
			}
		});
	});

	//带参get
	$btns.eq(1).click(function(){
		$.ajax({
			//说明请求方式为get请求
			type:'get',
			//指明请求要发送到的php后台地址
			url:'jqAjax.php?username='+$userNameInput.val()+'&password='+$passwordInput.val(),
			//指明与后台交互的数据格式为json
			dataType:'json',
			//当后台返回具体数据时，本函数自动执行，用来获取后台返回的具体内容
			success:function(res){
				console.log(res);
				console.log(res.info);
			}
		});
	});

	//post请求
	$btns.eq(2).click(function(){
		$.ajax({
			//说明请求方式为get请求
			type:'post',
			//指明请求要发送到的php后台地址
			url:'jqAjax.php?username='+$userNameInput.val()+'&password='+$passwordInput.val(),
			//无参：url:'jqAjax.php',
			//指明与后台交互的数据格式为json
			dataType:'json',
			//post请求独有字段，目的是存放post数组的参数，格式为json
			data:{
				uname:$userNameInput.val(),
				upass:$passwordInput.val()
			},

			//当后台返回具体数据时，本函数自动执行，用来获取后台返回的具体内容
			success:function(res){
				console.log(res);
			}
		});
	});
</script>
</body>
</html>